<template>
  <div class="goodsInfo">
    <div class="textContent" v-if="options?.type == 3">
      <p>{{ options.content }}</p>
    </div>

    <div class="bigImgContent" v-if="options?.type == 1">
      <nut-image
        class="bigImg"
        :src="commonStore.img_domain + options.content"
        @click="showFn(commonStore.img_domain + options.content)"
      >
        <!-- <template #error>
          <nut-image
            class="errorBig"
            src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
          />
        </template> -->
      </nut-image>
    </div>

    <div class="imgList acenter" v-if="options?.type == 2">
      <nut-image
        v-for="(sImage, index) in options.content_list"
        :key="index"
        :src="commonStore.img_domain + sImage"
        @click="showFn(commonStore.img_domain + sImage)"
      >
        <template #error>
          <nut-image
            src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
            fit="contain"
          />
        </template>
      </nut-image>
    </div>
    <my-image-preview ref="myImagePreviewRef"></my-image-preview>
    <!-- <div class="audioContent" v-if="options.type == 4">
      <nut-video
        :source="source"
        :options="options"
        @play="play"
        @pause="pause"
        @playend="playend"
      >
      </nut-video>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import useCommonStore from "@/store/common";
import { ref } from "vue";
import myImagePreview from "@/components/imagePreview/index.vue";

const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();

const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};

const commonStore = useCommonStore();
const props = defineProps<{ options: any }>();
</script>

<style lang="scss" scoped>
.goodsInfo {
  p {
    line-height: 40px;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 30px;
  }
  .bigImgContent {
    .bigImg {
      margin-bottom: 30px;
      width: 100%;
      border-radius: 20px;
    }
  }
  .imgList {
    margin-bottom: 30px;
    flex-wrap: wrap;
    .nut-image {
      width: 210px;
      height: 210px;
      border-radius: 20px;
      margin: 0;
      margin-top: 10px;
    }
    .nut-image:nth-child(2) {
      margin: 0 10px;
      margin-top: 10px;
    }
    .nut-image:nth-child(5) {
      margin: 0 10px;
      margin-top: 10px;
    }
    .nut-image:nth-child(8) {
      margin: 0 10px;
      margin-top: 10px;
    }
  }
}
</style>
